<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>基础信息</title>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/all.css" />
    <!-- <script src="time/mobiscroll.core-2.5.2.js" type="text/javascript" charset="utf-8"></script>
<script src="time/mobiscroll.core-2.5.2-zh.js" type="text/javascript" charset="utf-8"></script>
<script src="time/mobiscroll.datetime-2.5.1.js" type="text/javascript" charset="utf-8"></script>
<script src="time/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript" charset="utf-8"></script>
<script src="time/mobiscroll.android-ics-2.5.2.js" type="text/javascript" charset="utf-8"></script> 
<link rel="stylesheet" type="text/css" href="time/mobiscroll.android-ics-2.5.2.css"/>
<link rel="stylesheet" type="text/css" href="time/mobiscroll.animation-2.5.2.css"/>
<link rel="stylesheet" type="text/css" href="time/mobiscroll.core-2.5.2.css"/> -->
</head>

<body>
    <style type="text/css">
    .container {
        padding-top: 10px;
        padding-bottom: 50px;
    }

    .center2 {
        margin-bottom: 15px;
    }

    .center2 .row {
        padding: 0 1rem;
        border-bottom: 1px solid #cdcdcd;
    }

    .zhiwei {
        color: #179ef3;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .qiyename {
        font-size: 1.4rem;
        line-height: 3rem;
    }

    .qiyename a {
        color: #666666;
    }

    .xinzi {
        color: #da0000;
        font-size: 1.8rem;
        font-weight: 600;
    }

    .alt {
        line-height: 2rem;
    }

    .quyu {
        float: left;
        background: url(img/dd.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
    }

    .time {
        float: left;
        background: url(img/xl.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
        margin-left: 10px;
    }

    .xueli {
        float: left;
        background: url(img/sj.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
        margin-left: 10px;
    }

    .yj {
        border-radius: 2px;
        padding: 0.2rem 0;
        font-weight: 600;
        background: #179ef3;
        color: #FFFFFF;
    }

    .quyu2 {
        float: left;
        background: url(img/nannv.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
    }

    .time2 {
        float: left;
        background: url(img/nianji.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
        margin-left: 10px;
    }

    .quyu3 {
        float: left;
        background: url(img/tiem.png) no-repeat 0rem 0.4rem;
        background-size: 1rem;
        padding-left: 1.2rem;
        font-size: 1.2rem;
        color: #666;
        margin-top: 10px;
    }

    .bottom {
        position: fixed;
        left: 0;
        bottom: 0;
        text-align: center;
        background: #ffa328;
        color: #FFFFFF;
        width: 100%;
        line-height: 45px;
        margin: 0;
        padding: 0;
    }

    .bottom .col-xs-6 {
        font-weight: 600;
    }

    .ok {
        position: absolute;
        width: 80%;
        left: 10%;
        background: #fff;
        top: 50%;
        overflow: hidden;
        margin-top: -100px;
        display: none;
        border-radius: 5px;
        z-index: 1001;
    }

    .ok2 {
        position: absolute;
        width: 80%;
        left: 10%;
        background: #fff;
        top: 50%;
        overflow: hidden;
        margin-top: -100px;
        display: none;
        border-radius: 5px;
        z-index: 1001;
    }

    .ok3 {
        position: absolute;
        width: 80%;
        left: 10%;
        background: #fff;
        top: 50%;
        overflow: hidden;
        margin-top: -100px;
        display: none;
        border-radius: 5px;
        z-index: 1001;
    }

    .ok4,
    .ok5 {
        position: absolute;
        width: 80%;
        left: 10%;
        background: #fff;
        top: 50%;
        overflow: hidden;
        margin-top: -100px;
        display: none;
        border-radius: 5px;
        z-index: 1001;
    }

    .ok4 input,
    .ok5 input {
        border: 1px solid #999;
        width: 90%;
        display: block;
        margin: 0 auto;
    }

    .ok4 p,
    .ok5 p {
        font-size: 12px;
        color: #fa4c00;
        margin-top: 10px;
    }

    .okmess {
        line-height: 30px;
        text-align: center;
        border: 1px #EAEAEA solid;
        padding: 20px 0;
    }

    .okb {
        float: left;
        width: 50%;
        background: #49abfe;
        line-height: 35px;
        text-align: center;
    }

    .okb a {
        color: #FFFFFF;
    }

    .red {
        margin-bottom: 15px;
        color: #fa4c00;
        font-weight: 600;
        font-size: 1.6rem;
    }

    .bo {
        border: 1px #EAEAEA solid;
        padding: 10px;
        margin-bottom: 10px;
        color: #666;
    }

    .qiyexinxi a {
        color: #333;
    }

    .qiyeimg {
        width: 20%;
        margin-left: 5%;
        float: left;
        overflow: hidden;
    }

    .qiyeimg img {
        width: 100%;
        border-radius: 50%;
    }

    .qiyealt {
        float: right;
        width: 70%;
        line-height: 30px;
    }

    .qr2 {
        width: 100px;
        margin: 20px auto;
        background: #49abfe;
        line-height: 35px;
        color: #FFFFFF;
        border-radius: 2px;
    }

    .mianshididian {
        display: none;
    }

    .mianshihover {
        color: #179EF3;
    }

    .ok3qx,
    .ok3qr,
    .ok4qr {
        color: #FFFFFF;
    }

    .ok2close {
        width: 20px;
        height: 20px;
        font-size: 20px;
        float: right;
    }
    .go {
    background: #ffa328;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.6rem;
    padding: 10px 0;
    margin-top: 20px;
    border-radius: 5px;
  }
  .imgbox{
    display: flex;
    margin-bottom: 2rem;
    border: 0px;
        padding: 0 1rem;
        margin-right: -15px;
    margin-left: -15px;
  }
  .imgbox1{
    margin: 0 auto;
    display: flex;
  }
  .imgbox1 img{
    margin: 0 auto;
    border-radius: 50%;
  }
  .tiaoguo{
    float: right;
    padding-right: 15px;
  }
  .upImg{
    margin: 0 auto;
    position: relative;
  }
  .upImg input{
    opacity: 0;
        filter: alpha(opacity=0);
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
  }
    </style>
    <div class="heimu"></div>
    <div class="fabuactive">努力加载中，请稍后....</div>
    <div class="alltop">
        <div class="backone2">
            <a href="JHzhuce.html"><span class="glyphicon glyphicon-menu-left"></span><b>返回</b></a>
        </div>

          <div class="tiaoguo">
              </span><b>跳过</b>
          </div>
    </div>
    <div class="container">
        <div class="center2" style="margin-top: 2rem;">
            <div class="imgbox">
                <div class="col-xs-8 imgbox1" style="font-size: 1.4rem;">
                    <div class="upImg">
                        <input type="file" id="upImg">
                        <img src="../img/t1.jpg" id="showImg">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-xs-offset-1">姓名</div>
                <div class="col-xs-8">
                    <input type="text" class="form-control username" name="" id="shoujihao" placeholder="请输入您的名字" />
                </div>
            </div>
            <div class="row" style="position: relative;">
                <div class="col-xs-3 col-xs-offset-1">性别</div>
                <div class="col-xs-8">
                    <input type="radio" name="sex" value="0"> 男
                    <input type="radio" name="sex" value="1"> 女 </div>
            </div>
            <!-- <div class="row">
                <div class="col-xs-3 col-xs-offset-1">手机号</div>
                <div class="col-xs-8">
                    <input type="text" class="form-control phone" name="" id="text" value="" placeholder="" />
                </div>
            </div> -->
            <div class="row">
                <div class="col-xs-3 col-xs-offset-1">年龄</div>
                <div class="col-xs-8">
                    <input type="text" class="form-control age" name="" id="password2" value="" placeholder="" />
                </div>
            </div>
            <div class="go">确认</div>
    </div>

    <script type="text/javascript" src="../lib/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="../lib/vue.min.js"></script>
    <script type="text/javascript" src="../lib/common.js"></script>
    <script src="../lib/soha.js" type="text/javascript"></script>
    <!-- <script type="text/javascript" src="js/xq_ajax.js"></script> -->

    <script type="text/javascript">
    var headImgurl ;
        
      var b = new Base64(); //加密
      
      var query = ''+getUrlQuery().id;

      if (query == "undefined") {
        query = "zero0";
      }else{
        userid = b.decode(query); //解密urlid
      }

      $('#upImg').live('change',function(file){ 
           // 更换头像
            var fd = new FormData();
            var myDate = new Date();
            var date1 = _dateFormat(myDate, 'yyyyMMddHmmssS');
            fd.append("time", '' + date1);
            fd.append("file", $("#upImg").get(0).files[0]);
            
            
            postFormData('/api/uploadimg', fd, function(result) {
                    headImgurl = result.msg;

                    $('#showImg').src = headImgurl;

                      console.log("成功", result);
                       alert("更换成功");


            }, function(result) {
                console.log(result);
                alert("上传失败");
            });
        
        });
      

      // // 图片预览
      // function selectImage(file) {

      //     var read = new FileReader() // 创建FileReader对像;
      //     read.readAsDataURL(file.files[0]) // 调用readAsDataURL方法读取文件;

      //     read.onload = function() {
      //         url = read.result // 拿到读取结果;                   
      //         $('#showImg').src = url;
      //     }
      // }

        
      
      //跳过完善信息
      $('.tiaoguo').click(function () {
        
        window.location.href='index.html?id='+query;
      })

      // 上交完善信息
      $('.go').click(function () {
        var  username = $('.username').val();
        var  phone = $('.phone').val();
        var  age = parseInt($('.age').val());
        var sex = $("input[name='sex']:checked").val();
        if ( headImgurl == undefined ) {
            headImgurl = "../img/t1.jpg";
        }
        if ( sex == 0 ) {
             sex = "男";
        }else if ( sex == 1 ) {
           sex = "女";
        }

        postJSON('/api/uploadaccountmsg', { 
                                       "id": parseInt(userid),  
                                       "picurl": headImgurl ,
                                       "username": username,
                                       "sex": sex,
                                       "phone": "",
                                       "age": age,
                                       "atype": 0,
        }, function (result) {
            alert("修改成功");
             window.location.href='index.html?id='+query;
            
        }, function (result) {

        });

       
      })

    </script>

    <script src="js/peizhi.js" type="text/javascript" charset="utf-8"></script>
    


</body>

</html>